<template>
	<div class="nav_top">
			<div class="top">
				<div class="left">
					<h1>{{datas.overall_score.toFixed(1)}}</h1>
					<p style="font-size: 15px;">综合评价</p>
					<p>高于周边商家76.9%</p>
				</div>
				<div class="right">
					<p>服务态度<img src="../../public/img/xing.png" alt=""><span>{{datas.service_score.toFixed(1)}}</span></p>
					<p>菜品评价<img src="../../public/img/xing.png" alt=""><span>{{datas.food_score.toFixed(1)}}</span></p>
					<p>送达时间分钟</p>
				</div>
			</div>
			<div class="buttoms">
				<b_food_fen></b_food_fen>
			</div>
	</div>
</template>

<script>
	import b_food_fen from "../components/b_food_fenlei.vue"
	export default{
		data:function(){
			return{
				datas:[]
			}
		},
		created() {
			this.$axios({
				url:'https://elm.cangdu.org/ugc/v2/restaurants/'+this.$route.query.id+'/ratings/scores',
				method:'get'
			}).then(res=>{
				this.datas = res.data;
				// window.console.log(res.data);
			})
		},
		components:{
			b_food_fen
		},
		methods:{
			// function toPercent(point){
			//     var str=Number(point*100).toFixed(3);
			//     str+="%";
			//     return str;
			// }
		},
	}
</script>

<style scoped>
	.nav_top{
		background: #FFFFFF;
		margin-top: 160px;
	}
	
	.top{
		background: #FFFFFF;
		width: 100%;
		margin-top: 4px;
		padding: 15px 8px;
		overflow: hidden;
		box-sizing: border-box;
	}
	.buttoms{
		margin-top: 10px;
		overflow: hidden;
	}
	.nav_f{
		color: #000000;
		font-size: 15px;
		
	}
	h1{
		font-size: 22px;
		color: #f60;
	}
	.left{
		float: left;
		width: 45%;
		text-align: center;
	}
	.left p{
		color: #666666;
	}
	.right{
		float: left;
	}
	.right p{
		vertical-align: middle;
	}
	.right p span{
		color: #f60;
		font-size: 14px;
	}
	.right img{
		vertical-align: middle;
	}
</style>
